<template>
  <el-form>
    <el-form-item>
      <!--
        ref="tree" 为了将来可以使用组件实例的方法
        :data="menuList" 要渲染的数据
        show-checkbox 有多选框
        node-key="id" 遍历的key使用id
        default-expand-all 默认展开所有菜单
        :default-checked-keys="selectedMenuList" 默认选中哪些菜单
        :props="{ label: 'name' }" 使用name作为label的值进行显示
        check-strictly 让父级菜单和子菜单互不关联
       -->
      <el-tree
        ref="tree"
        :data="menuList"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="selectedMenuList"
        :props="{ label: 'name' }"
        check-strictly
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="roleAuth">确定</el-button>
      <el-button @click="$router.push('/acl/role/list')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'RoleAuth',
  data() {
    return {
      menuList: [],
      selectedMenuList: []
    }
  },
  async mounted() {
    // 获取路由的params参数 this.$route.params.id
    const result = await this.$API.acl.permission.getPermissionListByRole(
      this.$route.params.id
    )
    // 所有菜单
    this.menuList = result.data.children
    // 选中的菜单
    // 问题：因为提交菜单要求提交：全部数据等id，导致获取到全部数据select: true
    // 一旦父级菜单选中了，所有子级菜单就会默认选中
    // 解决：父级菜单选中，子级菜单不要选中 -> 让父级菜单和子菜单互不关联：check-strictly
    this.selectedMenuList = this.findSelectedPermissionList(
      result.data.children
    )
  },
  methods: {
    // 找到所有select: true就是角色权限值
    findSelectedPermissionList(permissionList) {
      let selectedMenuList = []

      permissionList.forEach((item) => {
        // 如果select： true，添加到数组中
        if (item.select) {
          selectedMenuList.push(item.id)
        }
        // 如果有子菜单，需要处理
        if (item.children) {
          // 找到所有子菜单的
          const childSelectedMenuList = this.findSelectedPermissionList(
            item.children
          )
          // 将子菜单的和当前菜单的合并在一起
          selectedMenuList = selectedMenuList.concat(childSelectedMenuList)
        }
      })

      return selectedMenuList
    },
    async roleAuth() {
      // 获取所有全选的节点
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      // 获取所有半选的节点
      const halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes()

      // const ids = checkedNodes.concat(halfCheckedNodes)
      const ids = [...checkedNodes, ...halfCheckedNodes] // 合并成一个数组
        .map((item) => item.id) // 只保留id
        .join(',') // 拼成字符串，作为发送请求的参数

      await this.$API.acl.permission.assignPermissionByRole(
        this.$route.params.id,
        ids
      )

      this.$message.success('分配角色权限成功')
      this.$router.push('/acl/role/list')
    }
  }
}
</script>

<style>
</style>
